
//1.实现一个插件，可以挂载$router
let Vue
//VueRouter是一个类，可以用new VueRouter来引用
class VueRouter {
    constructor(options) {
        this.$options = options
        console.log(this.$options)
        //创建响应式的current属性，利用Vue提供的defineReactive做响应化
        Vue.util.defineReactive(this, 'current', '/')
        // 监控url变化
        window.addEventListener('hashchange', this.onHashChange.bind(this))
        window.addEventListener('load', this.onHashChange.bind(this))
        // 创建一个路由映射表
        this.routeMap = {}
        options.routes.forEach(route => {
            this.routeMap[route.path] = route
        })
    }
    onHashChange() {
        this.current = window.location.hash.slice(1)
    }
}

VueRouter.install = (_Vue) => {
    // 保存Vue构造函数，在KVueRouter里面使用
    Vue = _Vue
    // 获取根实例中的router选项
    Vue.mixin({
        beforeCreate() {
            //根实例的时候才执行,只有根实例中才有router这个实例
            if (this.$options.router) {
                console.log(`this.$options.router`, this.$options)
                Vue.prototype.$router = this.$options.router
            }
        },
    })
    //实现全局的router-link 和router-view
    Vue.component('router-link', {
        props: {
            to: {
                type: String,
                require: true
            }
        },
        render(h) {
            console.log(`this.$slots`, this.$slots)
            //<router-link to="/about">xxx</router-link>本质上是一个a标签
            return h('a', { attrs: { href: "#" + this.to } }, this.$slots.default)
        }
    })
    Vue.component('router-view', {
        render(h) {
            //获取path对应的component
            const { current, routeMap } = this.$router
            console.log(routeMap,current);
            const component = routeMap[current].component || null
            return h(component)
        }
    })
}
export default VueRouter